<template>
  <div class="play-bar">
    <img
      class="thumb"
      :src="
        currentSong.song
          ? currentSong.picUrl
          : currentSong.al.picUrl | completeImageUrl
      "
      alt=""
    />
    <h5>
      {{ currentSong.name }}
      <span
        v-for="(ali, index) in currentSong.song
          ? currentSong.song.alias
          : currentSong.alia"
        :key="index"
        >({{ ali }})</span
      >
      <i>
        -
        {{
          currentSong.song ? currentSong.song.album.name : currentSong.al.name
        }}</i
      >
    </h5>

    <div class="progress">
      <canvas ref="canvas" width="60" height="60"></canvas>
      <span v-if="!playing" @click.stop="$emit('play-ing')"> ▶</span>
      <span v-else @click.stop="$emit('pause-ing')"
        ><svg
          t="1646294614025"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2055"
          width="15"
          height="15"
        >
          <path
            d="M128 106.858667C128 94.976 137.621333 85.333333 149.12 85.333333h85.76c11.648 0 21.12 9.6 21.12 21.525334V917.12c0 11.882667-9.621333 21.525333-21.12 21.525333H149.12A21.290667 21.290667 0 0 1 128 917.141333V106.88z m640 0c0-11.882667 9.621333-21.525333 21.12-21.525334h85.76c11.648 0 21.12 9.6 21.12 21.525334V917.12c0 11.882667-9.621333 21.525333-21.12 21.525333h-85.76a21.290667 21.290667 0 0 1-21.12-21.525333V106.88z"
            fill="#3D3D3D"
            p-id="2056"
          ></path></svg
      ></span>
    </div>
    <div class="list" @click.stop="$parent.showMyPlayList = true">
      <svg
        t="1646310851575"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9988"
        width="30"
        height="30"
      >
        <path
          d="M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM419.028 543.17h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z"
          fill=""
          p-id="9989"
        ></path>
        <path
          d="M256.037 255.953m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
          fill=""
          p-id="9990"
        ></path>
        <path
          d="M256.037 510.787m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
          fill=""
          p-id="9991"
        ></path>
        <path
          d="M256.037 767.621m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
          fill=""
          p-id="9992"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    currentSong: Object,
    playing: Boolean,
    currentTime: Number,
    duration: Number,
  },
  computed: {
    percentedProgress: function () {
      return this.duration === 0 ? 0 : this.currentTime / this.duration;
    },
  },
  watch: {
    percentedProgress: function (n) {
      const context = this.$refs.canvas.getContext("2d");
      context.clearRect(0, 0, 60, 60);
      context.lineWidth = 2;
      context.beginPath();
      context.arc(
        30,
        30,
        28,
        (Math.PI / 180) * -90,
        (Math.PI / 180) * (360 * n - 90)
      );
      context.strokeStyle = "black";
      context.lineWidth = 2;
      context.stroke();
      context.beginPath();
      context.arc(
        30,
        30,
        28,
        (Math.PI / 180) * (360 * n - 90),
        (Math.PI / 180) * 270
      );
      context.strokeStyle = "rgba(0,0,0,0.3)";
      context.lineWidth = 1;
      context.stroke();
    },
  },
};
</script>

<style lang="less">
.play-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: white;
  border-radius: 20px 20px 0 0;
  align-items: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: flex;
  .thumb {
    width: 30px;
    border-radius: 50%;
  }
  h5 {
    flex: 1;
    text-align: center;
  }
  .progress {
    position: relative;
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }
    span {
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      display: inline-block;
    }
  }
}
</style>